<template>
  <div>
    <!-- 头部 -->
    <header>
      <router-link to="/my" class="h45 bg-fff flex fcc">
        <i class="left-10 abs ml-10 iconfont iconleft" height="22px" width="15px"></i>
        <span>我想去</span>
      </router-link>
      <!-- 空白 -->
      <div class="colour"></div>
    </header>

    <!-- 主体 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <li class="flex bg-fff li" v-for="item in list" :key="item.index">
        <div>
          <img v-lazy="`https://img.villaday.com${item.imgUrl}`" height="105px" width="157px">
        </div>
        <div class="al-25">
          <b>{{item.name}}</b>
          <p class="pt-10 color">
            ￥{{item.price*0.01}}
            <span class="colors">人均:{{item.averageStr}}</span>
          </p>
        </div>
      </li>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      pageNum: 1,
      pageSize: 6,
      totalPge: "",
      finished: false
    };
  },
  methods: {
    //上拉加载 分页
    onLoad() {
      setTimeout(() => {
        let url = "/collection/getList";
        let data = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        };
        this.$axios
          .post(url, data)
          .then(res => {
            // console.log(res, "res");
            this.totalPge = res.totalPge;
            res.list.forEach(lists => {
              this.list.push(lists);
            });
            // 数据全部加载完成
            if (res.list <= this.pageSize) {
              this.finished = true;
            }
          })
          .then(() => {
            this.pageNum++; //页数增替
            // console.log(this.list);
            // 加载状态结束
            this.loading = false;
          });
      }, 800);
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../style/collec.less";
</style>

